<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统统计 - 向量库操作系统</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <header>
        <h1>向量库操作系统</h1>
        <p>文件管理、向量库和检索系统</p>
    </header>
    
    <nav class="navbar">
        <a href="/">首页</a>
        <a href="/files">文件管理</a>
        <a href="/search">内容检索</a>
        <a href="/stats" class="active">系统统计</a>
        <a href="/docs">API文档</a>
    </nav>
    
    <div class="container">
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-value" id="total-files">0</div>
                <div class="stat-label">总文件数</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="processed-files">0</div>
                <div class="stat-label">已处理文件</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="failed-files">0</div>
                <div class="stat-label">处理失败</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="total-vectors">0</div>
                <div class="stat-label">向量块数</div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h2>Milvus状态</h2>
            </div>
            <div id="milvus-stats">
                <p>加载中...</p>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h2>文件类型统计</h2>
            </div>
            <div id="file-type-stats">
                <p>加载中...</p>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h2>检索统计</h2>
            </div>
            <div id="search-stats">
                <p>加载中...</p>
            </div>
        </div>
    </div>
    
    <script src="/static/js/main.js"></script>
    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadDetailedStats();
            loadSearchStats();
        });
        
        // 加载详细统计信息
        function loadDetailedStats() {
            fetch('/api/v1/system/stats')
                .then(response => response.json())
                .then(data => {
                    // 更新基础统计信息
                    if (data.files && data.vectors) {
                        document.getElementById('total-files').textContent = data.files.total;
                        document.getElementById('processed-files').textContent = data.files.processed;
                        document.getElementById('failed-files').textContent = data.files.failed;
                        document.getElementById('total-vectors').textContent = data.vectors.total_count;
                    }
                    
                    // 渲染Milvus状态
                    renderMilvusStats(data.milvus);
                    
                    // 渲染文件类型统计
                    renderFileTypeStats(data.file_types);
                })
                .catch(error => {
                    console.error('加载详细统计信息失败:', error);
                });
        }
        
        // 渲染Milvus状态
        function renderMilvusStats(milvusData) {
            const milvusStatsContainer = document.getElementById('milvus-stats');
            if (!milvusStatsContainer) return;
            
            if (!milvusData) {
                milvusStatsContainer.innerHTML = '<p>无法获取Milvus状态</p>';
                return;
            }
            
            let html = `
                <table class="file-detail-table">
                    <tr>
                        <td><strong>集合名称:</strong></td>
                        <td>${milvusData.name || '未知'}</td>
                    </tr>
                    <tr>
                        <td><strong>实体数量:</strong></td>
                        <td>${milvusData.num_entities || 0}</td>
                    </tr>
                    <tr>
                        <td><strong>索引类型:</strong></td>
                        <td>${milvusData.index?.index_type || '未知'}</td>
                    </tr>
                    <tr>
                        <td><strong>距离度量:</strong></td>
                        <td>${milvusData.index?.metric_type || '未知'}</td>
                    </tr>
                </table>
            `;
            
            milvusStatsContainer.innerHTML = html;
        }
        
        // 渲染文件类型统计
        function renderFileTypeStats(fileTypes) {
            const fileTypeStatsContainer = document.getElementById('file-type-stats');
            if (!fileTypeStatsContainer) return;
            
            if (!fileTypes || fileTypes.length === 0) {
                fileTypeStatsContainer.innerHTML = '<p>暂无文件类型统计信息</p>';
                return;
            }
            
            let html = '<ul class="file-type-list">';
            fileTypes.forEach(item => {
                html += `<li>${item.file_type}: ${item.count} 个文件</li>`;
            });
            html += '</ul>';
            
            fileTypeStatsContainer.innerHTML = html;
        }
        
        // 加载检索统计
        function loadSearchStats() {
            fetch('/api/v1/search/stats')
                .then(response => response.json())
                .then(data => {
                    renderSearchStats(data);
                })
                .catch(error => {
                    console.error('加载检索统计失败:', error);
                });
        }
        
        // 渲染检索统计
        function renderSearchStats(statsData) {
            const searchStatsContainer = document.getElementById('search-stats');
            if (!searchStatsContainer) return;
            
            if (!statsData) {
                searchStatsContainer.innerHTML = '<p>无法获取检索统计信息</p>';
                return;
            }
            
            let html = `
                <table class="file-detail-table">
                    <tr>
                        <td><strong>总检索次数:</strong></td>
                        <td>${statsData.total_searches || 0}</td>
                    </tr>
                    <tr>
                        <td><strong>平均检索时间:</strong></td>
                        <td>${statsData.average_search_time ? statsData.average_search_time.toFixed(3) + ' 秒' : '未知'}</td>
                    </tr>
                </table>
                
                <h3>热门查询</h3>
            `;
            
            if (statsData.popular_queries && statsData.popular_queries.length > 0) {
                html += '<ul class="popular-queries">';
                statsData.popular_queries.forEach(query => {
                    html += `<li>${query.query}: ${query.count} 次</li>`;
                });
                html += '</ul>';
            } else {
                html += '<p>暂无热门查询</p>';
            }
            
            searchStatsContainer.innerHTML = html;
        }
    </script>
</body>
</html>